<template>
  <div class="box pt-96 flex justify-center flex-col items-center">
    <div class="btn m-auto button">测试一下</div>
    <div class="mask-inset-circle button">inset-circle</div>

    <!-- 添加新的凹陷矩形组件 -->
    <div class="curved-top-container -translate-y-7 mt-20">
      <div class="curved-top-box">
        <div class="content">
          <p>带有顶部凹陷的矩形</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const hello = ref("hello world");
</script>
<style lang="scss" scoped>
.button {
  width: 200px;
  height: 50px;
}

/* 保留原有样式 */
.mask-inset-circle {
  background: linear-gradient(45deg, #2179f5, #e91e63);
  mask: radial-gradient(
      circle at 100% 100%,
      transparent 0,
      transparent 12px,
      #2179f5 13px
    ),
    radial-gradient(circle at 0 0, transparent 0, transparent 12px, #2179f5 13px),
    radial-gradient(circle at 100% 0, transparent 0, transparent 12px, #2179f5 13px),
    radial-gradient(circle at 0 100%, transparent 0, transparent 12px, #2179f5 13px);
  mask-repeat: no-repeat;
  mask-position: right bottom, left top, right top, left bottom;
  mask-size: 70% 70%;
}

.btn {
  background-size: 70% 70%;
  background-image: radial-gradient(
      circle at 100% 100%,
      transparent 0,
      transparent 12px,
      #2179f5 13px
    ),
    radial-gradient(circle at 0 0, transparent 0, transparent 12px, #2179f5 13px),
    radial-gradient(circle at 100% 0, transparent 0, transparent 12px, #2179f5 13px),
    radial-gradient(circle at 0 100%, transparent 0, transparent 12px, #2179f5 13px);
  background-repeat: no-repeat;
  background-position: right bottom, left top, right top, left bottom;
}

/* 新增凹陷矩形样式 */
.curved-top-container {
  width: 300px;
  height: 200px;
  position: relative;
}

.curved-top-box {
  width: 100%;
  height: 100%;
  background-color: #4254b5; /* 蓝色背景，可以替换成其他颜色 */
  position: relative;
  overflow: hidden;
  border-radius: 8px;

  /* 使用mask创建顶部凹陷效果 */
  --notch-width: 80px; /* 凹陷宽度 */
  --notch-height: 40px; /* 凹陷高度 */
  --curve-radius: 40px; /* 弧度半径 */

  &::before {
    content: "";
    position: absolute;
    width: calc(var(--notch-width) + var(--curve-radius));
    height: calc(var(--notch-height) * 2);
    background-color: white; /* 与背景色形成对比的颜色 */
    border-radius: 50%;
    top: calc(var(--notch-height) * -1);
    left: 50%;
    transform: translateX(-50%);
  }

  /* 内容容器 */
  .content {
    padding: 20px;
    color: white;
    text-align: center;
    padding-top: calc(var(--notch-height) + 10px);
    position: relative;
    z-index: 1;
  }
}
</style>
